<template>
  <view>
	<Header title="消息">
		<uv-icon name="arrow-left" :bold="true" size="20" color="#000"  @click="goBack"></uv-icon>
	</Header>
	<view class="body">
		<view class="data" style="position: sticky; top: 0; background-color: #f3f5f8;">
		  <text>今天</text>
		</view>
		<view class="list-container" @scroll="handleScroll">
		  <view v-for="(item, index) in notificationssonList" :key="index">
		    <Notificationsson :item="item" />
		  </view>
		  <view v-if="loading" class="loading-more">加载中...</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue'
import Notificationsson from '@/components/notificationsson/notificationsSon.vue'
import Header from '@/components/AppHeader/Header.vue';
import { getMessage } from '@/api/home'

const notificationssonList = ref([]);
const loading = ref(false); // 加载状态
const page = ref(1); // 当前页码
const pageSize = ref(10); // 每页数量
const hasMore = ref(true); // 是否还有更多数据

// 告警设备类型映射
const alarmTypeMap = {
  1: '环境',
  2: '设备',
  3: '围栏'
};

// 告警原因映射
const alarmResonMap = {
  1: '阈值告警',
  2: '设备离线',
  3: '电量过低',
  4: '其它'
};

// 告警设备类型映射
const sbTypeMap = {
  1: '耳标',
  2: '项圈'
};

// 告警状态映射
const alarmZtMap = {
  1: '告警',
  2: '告警解除'
};

// 调用 getMessage 接口并处理返回的数据
const fetchMessageData = async (loadMore = false) => {
  try {
    if (loadMore && !hasMore.value) return; // 如果没有更多数据，不加载
    if (loadMore) loading.value = true;
    const res = await getMessage({
      page: page.value,
      pageSize: pageSize.value
    });
    console.log('接口返回的数据:', res);
    if (res.code === 200) {
      const transformData = res.data.map(item => {
        return {
          title: item.alarmtitle,
          number: item.liveid,
          imei: `IMEI: ${item.sbid}`,
          alarmtype: alarmTypeMap[item.alarmtype] || item.alarmtype, // 告警设备类型
          alarmreson: alarmResonMap[item.alarmreson] || item.alarmreson, // 告警原因
          alarmtime: item.alarmtime, // 告警时间
          sbtype: sbTypeMap[item.sbtype] || item.sbtype, // 告警设备类型
          sbdata: item.sbdata, // 设备返回数据
          orgid: item.orgid, // 牧场id
          alarmzt: alarmZtMap[item.alarmzt] || item.alarmzt, // 告警状态
          remark: item.remark, // 备注
        };
      });

      if (loadMore) {
        notificationssonList.value = [...notificationssonList.value, ...transformData];
        page.value++;
      } else {
        notificationssonList.value = transformData;
        page.value = 2; // 初始化页码为2，下次加载更多时从第2页开始
      }
      hasMore.value = transformData.length >= pageSize.value; // 判断是否还有更多数据
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    if (loadMore) loading.value = false;
  }
};

// 页面加载时调用接口
onMounted(() => {
  fetchMessageData();
});

// 监听滚动事件，实现触底加载更多
const handleScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
  if (scrollTop + clientHeight >= scrollHeight - 50 && !loading.value && hasMore.value) {
    fetchMessageData(true); // 加载更多数据
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="scss">
.data {
  margin-left: 28rpx;
  margin-bottom: 26rpx;
  color: #6a6a6a;
  font-weight: 549;
  background-color: #f3f5f8;
}

.body {
  width: 750rpx;
  background-color: #f3f5f8;
  padding-top: 40rpx;
}

.list-container {
  max-height: 80vh; /* 设置最大高度，可以根据需要调整 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.loading-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>